<template>
    <div class="dashboard-wrapper">
      <div class="stat-row">
        <StatCard label="总访问次数" value="9,120" percent="+20%" />
        <StatCard label="在线访客数" value="182" percent="+10%" />
        <StatCard label="点击量" value="9,520" percent="-12%" :up="false" />
        <StatCard label="新用户" value="156" percent="+30%" />
      </div>
  
      <div class="panel-row">
        <div class="panel">
          <h3>访问量</h3>
          <LineChart />
        </div>
        <div class="panel">
          <h3>代办事项</h3>
          <TodoPanel :list="todoList" />
        </div>
      </div>
  
      <div class="stat-row bottom">
        <StatCard label="总用户量" value="32k" percent="+5%" />
        <StatCard label="总访问量" value="128k" />
        <StatCard label="日访问量" value="1.2k" />
        <StatCard label="周同比" value="20%" percent="+6%" />
      </div>
    </div>
  </template>
  
  <script setup>
  import StatCard  from '@/components/StatCard.vue'
  import LineChart from '@/components/LineChart.vue'
  import TodoPanel from '@/components/TodoPanel.vue'
  
  const todoList = [
    { name: '待处理', percent: 75, desc: '3 项', color: '#ff9800' },
    { name: '已完成', percent: 100, desc: '12 项', color: '#52c41a' }
  ]
  </script>